<template> <div class="page-container">
  <div class="common-content">
  <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
   <div class="search-wrap" style="padding-top:20px">
    <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
     <el-form-item label="场景名称：">
      <el-input v-model="searchFilters.sceneName" placeholder="请输入场景名称"></el-input>
     </el-form-item>
     <el-form-item label="增加类型:">
      <el-select v-model="searchFilters.addType"   placeholder="请选择增加类型">
               <el-option label="全部" value="">全部</el-option></el-option>
                <el-option label="区间(随机)" value="1">区间(随机)</el-option>
                <el-option label="固定值" value="2">固定值</el-option>
               <!--  <el-option label="转换率" value="3">转换率</el-option> -->
                <el-option label="递增" value="4">递增</el-option>
                <el-option label="满加" value="5">满加</el-option>
               <!--  <el-option label="计算" value="6">计算</el-option> -->
      </el-select>
     </el-form-item>
     <el-form-item label="规则类型">
      <el-select v-model="searchFilters.ruleType"    placeholder="请选择增加类型">
                <el-option label="全部" value="">全部</el-option></el-option>
                <el-option label="基本规则" value="1">基本规则</el-option>
                <el-option label="额外规则" value="2">额外规则</el-option>
                <el-option label="限制规则" value="3">限制规则</el-option>
      </el-select>
     </el-form-item>
    
      <!-- 搜索区域按钮-查询,重置 -->
      <div class="tool-wrap">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="findPage()">查询</el-button>
         <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
         <el-button type="primary" size="small" @click="addForm()">新增</el-button>
         <el-button type="primary" size="small" @click="auditChange(1)">审核</el-button>
        </el-button-group>
       </div>
      </div>
      <el-dialog title="审核" :visible.sync="dialogFormVisible" width="60%">
        <el-form :model="auditForm" ref="auditForm" :rules="auditFormRules" >
           <el-form-item label="审核状态"  prop="auditSts" style="width:100%;padding-bottom: 20px;">
            <el-select v-model="auditForm.auditSts" placeholder="请选择审核状态" style="width: 15rem;"   @change="auditReasonlogShow">
              <el-option label="审核通过" value="1" ></el-option>
              <el-option label="审核不通过" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核原因" v-show="auditReasonShow" style="width:100%">
            <el-input type="textarea" style="width: 30rem;"  v-model="auditForm.auditReason"  placeholder="请输入审核原因" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="auditChange(2)">确 定</el-button>
        </div>
      </el-dialog>
       <el-tabs v-model="activeName" @tab-click="handleClick" >
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
      </el-tabs>
      <!-- 表格数据部分 -->
      <div class="table-wrap">
       <jic-table
          :height="350"
          :operationWidth=300
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showDetailOperation=true
          :showEditOperation=true
          :showBatchDelete=false
          :showSelection=true
          :showIndex=false
          :showDeleteOperation=true
          @selectionChange="selectionChange"
          @findPage="findPage"
          @handleDetail="handleDetail"
          @handleDelete="handleDelete"
          @handleEdit="handleEdit"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          ref="jicTable"
        ></jic-table>
      </div>
</el-form>
    </div>
   </div>
</div>
</template>
<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable'; 

//二.数据输出区
export default {

//===== 注册组件 =====
components: {
 jicTable,
},

//===== 数据初始化区=====
data() { return {

//===== 公共数据初始化 =====
pageIndex:0,//当前页数：首页；
pageSize:10,//每页记录数：10条记录；
totalSize:0,//总记录数：返回数据总条数
selectionChangeList:[],
pageRequest: {pageNum: 1, pageSize: 10},     // 请求数据的参数
tableList: [],                               // 表格列表数据
searchSize: 'mini',
activeName:'first',
auditReasonShow:false,
dialogFormVisible:false,//审核dialog框默认不显示
//=====表格表头数据=====
tableHeaderList: [
/* {prop: "id", label: "主键", minWidth: 100,formatter:null}, */
/* {prop: "sceneId", label: "场景id", minWidth: 100,formatter:null}, */
{prop: "sceneName", label: "场景名称", minWidth: 100,formatter:null},
/* {prop: "action", label: "处理", minWidth: 100,formatter:null}, */
{prop: "addType", label: "增加类型", minWidth: 100,
formatter:function(row,column,addType,index){
              if(addType == "1"){
                return "区间";
              }else if(addType == "2"){
                return "固定";
              }else if(addType == "3"){
                return "转换";
              }else if(addType == "4"){
                return "递增";
              }else if(addType == "5"){
                return "满加";
              }else if(addType == "6"){
                return "计算";
              }
    }},
{prop: "ruleType", label: "规则类型", minWidth: 100,
formatter: function (row, column, ruleType, index) {
              if (ruleType == "1") {
                  return "基本规则";
              }else if (ruleType == "2"){
                return "额外规则";
              }else if(ruleType == "3"){
                return "限制规则";
              }
          }},
/* {prop: "extraType", label: "额外规则", minWidth: 100,formatter:null},
{prop: "expression", label: "表达式", minWidth: 100,formatter:null},
{prop: "title", label: "标题", minWidth: 100,formatter:null},
{prop: "addScore", label: "固定", minWidth: 100,formatter:null},
{prop: "increaseScore", label: "增量", minWidth: 100,formatter:null},
{prop: "minScore", label: "下限", minWidth: 100,formatter:null},
{prop: "maxScore", label: "上限", minWidth: 100,formatter:null},
{prop: "fullNum", label: "满加次数", minWidth: 100,formatter:null},
{prop: "dailyNum", label: "每日次数", minWidth: 100,formatter:null},
{prop: "maxNum", label: "最大次数", minWidth: 100,formatter:null},
{prop: "pid", label: "上级id", minWidth: 100,formatter:null}, 
{prop: "productType", label: "产品", minWidth: 100,formatter:null},
{prop: "deleteFlag", label: "是否删除：0不删除， 1删除 ", minWidth: 100,formatter:null},
{prop: "weight", label: "权重（场景内）", minWidth: 100,formatter:null},
{prop: "ruleTypeShow", label: "展示规则类型", minWidth: 100,formatter:null},
{prop: "hrShow", label: "展示分割线", minWidth: 100,formatter:null},
{prop: "extraBtn", label: "额外规则btn", minWidth: 100,formatter:null},
{prop: "description", label: "基本规则描述", minWidth: 100,formatter:null},
{prop: "applierId", label: "申请人ID", minWidth: 100,formatter:null},
{prop: "applyReason", label: "申请原因", minWidth: 100,formatter:null},
{prop: "auditorId", label: "审批ID", minWidth: 100,formatter:null},
{prop: "auditReason", label: "审批原因", minWidth: 100,formatter:null},
{prop: "createTime", label: "创建时间", minWidth: 100,formatter:null},
{prop: "updateTime", label: "更新时间", minWidth: 100,formatter:null},
{prop: "creator", label: "创建用户", minWidth: 100,formatter:null},
{prop: "creatorName", label: "", minWidth: 100,formatter:null},
{prop: "updater", label: "更新用户", minWidth: 100,formatter:null},
{prop: "updaterName", label: "", minWidth: 100,formatter:null}, */
{prop: "auditSts", label: "状态", minWidth: 100,
formatter: function (row, column, auditSts, index) {
              if (auditSts == "0") {
                  return "待审核";
              }else if (auditSts == "1"){
                return "启动";
              }else if(auditSts == "2"){
                return "停用";
              }
          }},
],
//=====搜索表单对应的数据对象初始化=====
searchFilters: {
 id:null,
 pid:null,
 sceneId:null,
 sceneName:null,
 code:null,
 action:null,
 addType:null,
 ruleType:null,
 extraType:null,
 expression:null,
 title:null,
 addScore:null,
 increaseScore:null,
 minScore:null,
 maxScore:null,
 fullNum:null,
 dailyNum:null,
 maxNum:null,
 productType:null,
 deleteFlag:null,
 weight:null,
 ruleTypeShow:null,
 hrShow:null,
 extraBtn:null,
 description:null,
 applierId:null,
 applyReason:null,
 auditorId:null,
 auditReason:null,
 createTime:null,
 updateTime:null,
 creator:null,
 creatorName:null,
 updater:null,
 updaterName:null,
 auditSts:null,
 templateId:null,
 currentAction:null
},
auditFormRules:{
 auditSts:[{ required: true, message: "请选择审核状态", trigger: "blur" }],
},
//待审核数据
auditForm:{
  id:null,
  auditSts:null,
  auditReason:null,
},
//dialogVisible: false, //// 是否显示弹窗内容;
//editDialogVisible1: false,//// 是否可编辑弹窗内容;
//editLoading: false,////是否显示加载时动画效果;
}
},

//===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
mounted() {
 this.findPage();
},

//=====Vue.js 方法区=====
methods: {
  /*tabs函数 */
handleClick(tab, event){
  console.log(tab, event);
  this.findPage();
},
auditReasonlogShow(){
 let this_ = this;
 if(this_.auditForm.auditSts==2){
   this.auditReasonShow=true;
 }else{
   this.auditReasonShow=false;
 }
},
//1.查询按钮：查询列表数据
findPage(pageNum) {
      // 传过滤器的参数
  let this_ = this;
  if (this_.searchFilters === undefined || this_.searchFilters === null) {
    this_.searchFilters = {};
  }
  
   this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
   this_.searchFilters.pageSize = this.pageRequest.pageSize;
   if(this_.activeName == 'second'){
    this.utils.request.findConfActivityRuleDetailTemplateApplyPage(this_.searchFilters, function (res) {
    if (res.code === "0000") {
      this_.tableList = res.data.list;
      this_.totalSize = Number(res.data.total);
    } else {
        this_.tableList = [];
        this_.totalSize = 0;
    }
    });
  }else{
    this.utils.request.findConfActivityRuleDetailTemplatePage(this_.searchFilters, function (res) {
    if (res.code === "0000") {
      this_.tableList = res.data.list;
      this_.totalSize = Number(res.data.total);
    } else {
        this_.tableList = [];
        this_.totalSize = 0;
    }
    });
  }
},

// 2.重置按钮：无条件查询搜索框条件
resetForm(formName) {
 this.searchFilters = {
};
 this.findPage(null);
},

// 3.详情按钮对应的方法
handleDetail(params) {
 this.$router.push({path: "/ConfActivityRuleDetailTemplateDetail/" ,query:{id:params.row.id,disabled:true,activeName:this.activeName,action:'select'}});
},
selectionChange(params) {
      this.selectionChangeList = params.selections;
    },
// 4.编辑按钮对应的方法
handleEdit(params) {
 this.$router.push({path: "/ConfActivityRuleDetailTemplateDetail/",query:{id:params.row.id,disabled:false,activeName:this.activeName,action:'update'}});
},

// 5.跳转到新增记录页面；
addForm(params) {
params ={row:{ id:null }};
 this.$router.push({path: "/ConfActivityRuleDetailTemplateDetail/",query:{id:params.row.id,disabled:false,action:'insert'}});
},
// 6.每页记录数发生变化
handleSizeChange(params) {
 this.pageRequest.pageSize = params.size;
},

// 7.请求页数发生变化
handlePageChange(params) {
this.pageRequest.pageNum = params.number;
this.findPage();
},
// 8.页面弹窗处理方法
add() {
this.dialogVisible = true;
},

// 9.关闭弹窗
handleClose() {
this.dialogVisible = false;
},

// 10.删除按钮：删除选中的记录
handleDelete(data) {
  if(this.activeName == 'second'){
  this.utils.request.deleteConfActivityRuleDetailTemplateApply({id: data.row.id}, res => {
    if (res.data) {
    this.$message({message: '删除成功', type: 'success'});
    this.findPage();
    } else {
    this.$message({message: '删除失败', type: 'warning'});
    }
 });
  }else{
  this.utils.request.deleteConfActivityRuleDetailTemplate({id: data.row.id}, res => {
    if (res.data) {
    this.$message({message: '提交成功', type: 'success'});
    this.findPage();
    } else {
    this.$message({message: '提交失败', type: 'warning'});
    }
 });

  }

},
auditChange(num){ //
    let this_ = this;
    if(num == 1){
        if(this.activeName == 'first'){
           this_.$message({ message: "请选择待审核数据", type: "warning" });
           return false;
        }
        if (this_.selectionChangeList.length < 1) {
          this_.$message({ message: "必须选中一条数据", type: "warning" });
          return false;
        }
        this_.dialogFormVisible = true;
    }else{
      if(this_.auditForm.auditSts==2){
        if(this_.auditForm.auditReason ==null || this_.auditForm.auditReason ==""){
            this_.$message({ message: "请输入审核失败原因！", type: "warning" });
            return false;
        }
    }
      ;
      this_.$refs.auditForm.validate(valid => {
        if (valid) {
          this_.$confirm("确认提交吗？", "提示", {}).then(() => {
            this_.editLoading = true;
            this_.selectionChangeList.forEach(item=>{
            let params = item;
            params.auditSts = this_.auditForm.auditSts;
            params.auditReason = this_.auditForm.auditReason;
            this_.utils.request.saveConfActivityRuleDetailTemplateApplyAudit(params,
              function(res) {
                if (res.code === "0000") {
                  this_.dataForm = {};
                  this_.dialogFormVisible = false;
                  this_.findPage(null);
                  this_.$message({ message: "操作成功", type: "success" });
                  this_.auditForm = {};
                } else {
                  this_.$message({ message: "操作失败", type: "error" });
                  this_.dialogFormVisible = false;
                  this_.findPage(null);
                }
              }

            );
            });
          });
        }
      });
    }
}
//==========Vue.js自定义方法区==========
},
}
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
